<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main.css" />
<script src = "../js/unittest.js">
</script>
<script src = "../js/rational.js">
</script>
<script src = "../js/piece.js">
</script>
<script src = "../js/connectedPiece.js">
</script>
<script src = "../js/stripe.js">
</script>
<script src = "../js/board.js">
</script>
<script src = "../js/render.js">
</script>
<script src = "../js/wz_jsgraphics.js">
</script>
<script src = "../js/jquery-1.2.6.min.js">
</script>

<script src = "../js/controller.js">
</script>
<script src = "../js/move.js">
</script>
<script src = "../js/game.js">
</script>
<script src = "../js/algorithm.js">
</script>
<script src = "../js/algCluster.js">
</script>
<script src = "../js/algDeep.js">
</script>


<script src = "../js/util.js">
</script>
<script src = "../js/chats.js">
</script>
<script src = "../js/json2.js">
</script>
<script src = "../js/remoteUser.js">
</script>
<script src = "../js/remotePlayer.js">
</script>
 
<script>
var initialized = false;
$(document).ready(function(){
  init();
});

function init() {
  
  if (initialized) {
    return;
  }
  initialized = true;
  //testAll();
  var remotePlay = null;
  
  {% if table %}
    setupChat({{ table.table_number_str }});
    remotePlay = new RemotePlayer({{ table.table_number_str }});
  {% endif %}

  var controller = new Controller("board", remotePlay);
  controller.init();
}


</script>
</head>
<body onLoad = "init()">

  	{% if user %}
    	<div align="right">Logged in as {{ user.nickname }} - 
          <a href="/edituser/{{ user.email }}">Edit My Profile</a> -
    	  <a href="{{log_in_out_url}}">Log out</a> </div>
   	{% else %}
    	<div align="right"><a href="{{log_in_out_url}}">Log in to play with other players</a></div>
    {% endif %}
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td class="moveHistoryButton"><button  type="button" onclick="_controller.onMoveSelected(0)">--></button>
          </td>
        </tr>
        <tr>
          <td id = "moveHistory">
          </td>
        </tr> 
      </table>
   </td>
   <td id = "boardContainer">
     <div id="board"></div>
  </td>
  <td>
    <table>
      <tr>
        <td><span> <a href="http://sites.google.com/site/crumblegame/">What is Crumble?</a></span>
           <div id = "gamelink"> </div>
        </td>
        
      </tr>
      {% if user %}
      <tr>
        <td><button type="button" onclick="_controller.leaveTable()">Leave table</button>
        </td>
      </tr>
      <tr>
      
      {% endif %}
      <tr>
      {% if user %}
        <td>
            <button type="button" id="newGameWhite" onclick="_controller.requestNewGame(WHITE)">New game as White</button>
            <button type="button" id="newGameBlack" onclick="_controller.requestNewGame(BLACK)">New game as Black</button>
            <INPUT TYPE="checkbox" id="desiredBlack" CHECKED style="visibility: hidden;"></INPUT>
        </td>
      </tr>
      {% endif %}
      {% if not user %}
      <tr>
        <td>
          <INPUT TYPE="checkbox" id="desiredBlack" CHECKED>I want to play black</INPUT>
        </td>
      </tr>
      <tr>
        <td>
            <button type="button" onclick="_controller.newGame(UNKNOWN)">new game</button>
        </td>
      </tr>
      {% endif %}
      
       <tr>
        <td id = "whoseMove" style = "font-size:20px">
        </td>
      </tr>
      {% if not user %}
       <tr>
         <td><INPUT TYPE="checkbox" id="demo" UNCHECKED onClick="_controller.setDemo()">demo mode</INPUT>
         </td>
       </tr>
      <tr><td><INPUT TYPE="checkbox" id="blackPlayerComp" UNCHECKED onClick="_controller.setBlackPlayerComp()">Computer plays Black (Easy)</INPUT></td></tr>
      <tr><td><INPUT TYPE="checkbox" id="whitePlayerComp" UNCHECKED onClick="_controller.setWhitePlayerComp()">Computer plays White (Moderate)</INPUT></td></tr>
      {% endif %}
    
      <tr>
        <td>
            <button type="button" onclick="_controller.cancelMove()">cancel move</button>
        </td>
      </tr>
      <tr>
        <td>
            <button type="button" style="height:90px;width:180px;font-size:30px" onclick="_controller.submitMove()">complete move</button>
        </td>
      </tr>
      <tr>
        <td>
            <button type="button" onclick="_controller.undo()">undo</button>
        </td>
      </tr>
      <tr>
        <td>
            <button type="button" onclick="_controller.snapView()">fit into window</button>
        </td>
      </tr>
      <tr></tr>
      <tr></tr>
    <tr><td>controls:</td></tr>  
	  <tr><td><span style="color:blue">Split:</span> drag mouse in the direction of split</td></tr>
	  <tr><td><span style="color:blue">Merge:</span> Shift + Ctrl + drag mouse between two opposite pieces</td></tr>
	  <tr><td><span style="color:blue">Swap:</span> mouse click</td></tr>
    <tr><td><span style="color:blue">Pan:</span> Shift + drag mouse</div></td></tr>
	  <tr><td><span style="color:blue">Zoom:</span> Ctrl + drag mouse</td></tr>
    <tr><td><span style="color:blue">Move history</span> (p)revious/(n)ext</td></tr>
    <tr></tr>
	  <tr></tr>
      {% if not user %}
    
	  <tr><td><INPUT TYPE="checkbox" id="validator" CHECKED onClick="_controller.turnValidation()">turn on validation</INPUT></td></tr>
      {% endif %}
    <tr>
		    <td>
					<div id = "message" style="color:red"></div>
  			</td>
  	  </tr>
    <tr>
    	<td id = "material">
      </td>
    </tr>
    <tr>
      <td>
      <table id = "participants">
        
      </table>
      </td>
    </tr>
    {% if user %}
    <tr>
      <td>Table {{ table.table_number_str }}
      </td>
    </tr>
    <tr>
        <td>
         <div>
         <form action="javascript:sendChat();">
          <div><input name="content" type="text" id="chattext" size="60"></input>
          <input type="submit" value="Chat"></div>
         </form>
         </div>    
        <br/>
         <div id="chats" style="padding:10px;background-color:white;width:400;height:80; overflow:auto;">
         
        </td>
     </tr>
    {% endif %}    
     </table>
  </td>
</tr>
</table>
</body>
